<template>
  <div class="page-mobile-user">
    <div class="user-info">
      <div class="head-top">
        <div class="top-left"></div>
        <div class="top-center">我的</div>
        <div class="top-right" @click="$router.push('/m/setting')">
          <img src="/img/mobile/my_set.png" alt="" />
        </div>
      </div>
      <div class="info" v-show="token && Object.keys(user_info).length > 0">
        <div class="info-logo">
          <img :src="user_info.avatar" alt="" :key="Math.random()">
        </div>
        <div class="info-content">
          <div class="content-top">
            <div class="user-name">
              {{ user_info.acName || $t("locale.mobile.user.unknow") }}
            </div>
            <div
              class="user-member"
              v-if="!is_hidden_content && kl_md.KLHY == 1"
            >
              <img
                class="member-logo"
                v-if="!is_member"
                @click="$router.push('/m/member')"
                src="/img/mobile/user-member.png"
                alt=""
              />
              <img
                v-else-if="is_member && user_member.memberLevel === 0"
                class="member-level-one"
                src="/img/mobile/user_nav_ordinary.png"
                alt=""
              />
              <img
                v-else-if="is_member && user_member.memberLevel === 1"
                class="member-level-two"
                src="/img/mobile/user_nav_senior.png"
                alt=""
              />
              <img
                v-else-if="is_member && user_member.memberLevel === 2"
                class="member-level-three"
                src="/img/mobile/user_nav_super.png"
                alt=""
              />
            </div>
            <!-- <div class="user-signin">
              <img class="signin-logo" src="/img/mobile/user-signin.png" alt="">
            </div> -->
          </div>
          <div class="content-bottom">
            <div class="bottom-left" @click="$router.push('/m/class-info')">
              <!-- {{ getClassName(user_info.userClass) }} -->
              {{ user_info.className }}
            </div>
            <div class="bottom-right" @click="$router.push('/m/edit')">
              <span>个人信息</span>
              <img src="/img/mobile/white-right-icon.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div
        class="not-login"
        v-show="!token && Object.keys(user_info).length == 0"
      >
        <div class="default-logo">
          <img src="/img/mobile/default-avatar.png" alt="" />
        </div>
        <div class="user-tx">
          {{ $t("locale.mobile.user.t2")
          }}<nuxt-link to="/m/login">{{
            $t("locale.mobile.user.t3")
          }}</nuxt-link
          >{{ $t("locale.mobile.user.t4") }}
        </div>
      </div>
      <div
        class="study-info"
        v-show="token && Object.keys(user_info).length > 0"
      >
        <div class="study-left">
          <div>{{ buy_record_list.length }}</div>
          <div>学习进度</div>
        </div>
        <div class="study-right">
          <template
            v-if="studyLevelConfig.isOpenStudyLevel == 1 && kl_md.KLXXDJ == 1"
          >
            <div @click="$router.push('/m/study-level')" class="study-star">
              {{ user_info.studyStarNum | formatStudyStar(that) }}
            </div>
            <div @click="$router.push('/m/study-level')" style="width:100%;">
              我的等级
            </div>
          </template>
          <template v-else>
            <div style="margin: 0 auto;">
              {{ user_info.studyTime ? user_info.studyTime : 0 }}
            </div>
            <div style="width:100%;">学习时长</div>
          </template>
        </div>
      </div>
    </div>
    <div class="user-nav">
<!--      <div
        class="nav-item"
        @click="
          $router.push(kl_md.KLXBTK == 1 ? '/m/v2-my-questions' : '/m/my-test')
        "
        v-if="kl_md.KLXBTK == 1 || kl_md.KLJBTK == 1"
      >
        <div class="nav-icon">
          <img src="/img/mobile/my-question.png" alt="" />
        </div>
        <div class="nav-name">我的题库</div>
      </div> -->
      <div
        class="nav-item"
        @click="$router.push('/m/course-my')"
        v-if="!is_hidden_content && kl_md.KLDLTK != 1"
      >
        <div class="nav-icon">
          <img src="/img/mobile/my-course.png" alt="" />
        </div>
        <div class="nav-name">我的课程</div>
      </div>
      <div
        class="nav-item"
        @click="
          $router.push(
            kl_md.KLXBTK == 1 ? '/m/v2-history-score' : '/m/my-wrong'
          )
        "
        v-if="kl_md.KLXBTK == 1 || kl_md.KLJBTK == 1"
      >
        <div class="nav-icon">
          <img src="/img/mobile/my-wrong.png" alt="" />
        </div>
        <div class="nav-name">
          {{ kl_md.KLXBTK == 1 ? "历史成绩" : "我的错题" }}
        </div>
      </div>
    </div>
    <!-- <div class="nav-box-list">
      <div
        class="list-item"
        @click="
          $router.push(kl_md.KLXBTK == 1 ? '/m/v2-my-test' : '/m/test-record')
        "
        v-if="kl_md.KLXBTK == 1 || kl_md.KLJBTK == 1"
      >
        <div class="item-left">
          <img src="/img/mobile/user-list-1.png" alt="" />
        </div>
        <div class="item-right">
          <div class="right-box-left">
            {{ kl_md.KLXBTK == 1 ? "我的考试" : "考试记录" }}
          </div>
          <div class="right-box-right">
            <img src="/img/mobile/right-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div class="list-item" v-if="kl_md.KLZYGL == 1" @click="$router.push('/m/my-task')">
        <div class="item-left">
          <img src="/img/mobile/user-list-9.png" alt="" />
        </div>
        <div class="item-right">
          <div class="right-box-left">我的作业</div>
          <div class="right-box-right">
            <img src="/img/mobile/right-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div class="list-item" @click="$router.push('/m/collection')">
        <div class="item-left">
          <img src="/img/mobile/user-list-2.png" alt="" />
        </div>
        <div class="item-right">
          <div class="right-box-left">我的收藏</div>
          <div class="right-box-right">
            <img src="/img/mobile/right-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div class="list-item" @click="$router.push('/m/my-certificate')" v-if="kl_md.KLZSCL == 1">
        <div class="item-left">
          <img src="/img/mobile/user-list-11.png" alt="" />
        </div>
        <div class="item-right">
          <div class="right-box-left">我的证书</div>
          <div class="right-box-right">
            <img src="/img/mobile/right-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div class="list-item" @click="$router.push('/m/my-wallet')">
        <div class="item-left">
          <img src="/img/mobile/user-list-3.png" alt="" />
        </div>
        <div class="item-right">
          <div class="right-box-left">我的账户</div>
          <div class="right-box-right">
            <img src="/img/mobile/right-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div class="list-item" @click="$router.push('/m/certificate')" v-if="kl_md.KLZSCL == 1">
        <div class="item-left">
          <img src="/img/mobile/user-list-10.png" alt="" />
        </div>
        <div class="item-right">
          <div class="right-box-left">证书查询</div>
          <div class="right-box-right">
            <img src="/img/mobile/right-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div
        class="list-item"
        @click="$router.push('/m/group-booking')"
        v-if="
          !is_hidden_content &&
            !is_hidden_for_ios &&
            kl_md.KLDLTK != 1 &&
            kl_md.KLPT == 1
        "
      >
        <div class="item-left">
          <van-icon name="friends-o" />
        </div>
        <div class="item-right">
          <div class="right-box-left">我的拼团</div>
          <div class="right-box-right">
            <img src="/img/mobile/right-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div
        class="list-item"
        @click="$router.push('/m/distribution')"
        v-if="
          !is_hidden_content &&
            !is_hidden_for_ios &&
            kl_md.KLDLTK != 1 &&
            kl_md.KLFX == 1 &&
            web_info.DISTRIBUTE_SWITCH == 1
        "
      >
        <div class="item-left">
          <img src="/img/mobile/user-list-4.png" alt="" />
        </div>
        <div class="item-right">
          <div class="right-box-left">推广分销</div>
          <div class="right-box-right">
            <img src="/img/mobile/right-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div
        class="list-item"
        @click="$router.push('/m/area-agent')"
        v-if="
          !is_hidden_content &&
            !is_hidden_for_ios &&
            kl_md.KLDLTK != 1 &&
            kl_md.KLQYDL == 1 &&
            web_info.AGENT_AREA_SWITCH == 1
        "
      >
        <div class="item-left"> -->
          <!-- <van-icon name="award-o" /> -->
          <!-- <img src="/img/mobile/area-agent.png" alt="" />
        </div>
        <div class="item-right">
          <div class="right-box-left">区域代理</div>
          <div class="right-box-right">
            <img src="/img/mobile/right-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div
        class="list-item"
        @click="$router.push('/m/team-distribution')"
        v-if="
          !is_hidden_content &&
            !is_hidden_for_ios &&
            kl_md.KLDLTK != 1 &&
            kl_md.KLTDFX == 1 &&
            web_info.AGENT_TEAM_SWITCH == 1 &&
            isTeamAgent
        "
      >
        <div class="item-left"> -->
          <!-- <van-icon name="friends-o" /> -->
          <!-- <img src="/img/mobile/team-distribution.png" alt="" />
        </div>
        <div class="item-right">
          <div class="right-box-left">团队分销</div>
          <div class="right-box-right">
            <img src="/img/mobile/right-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div class="list-item" @click="$router.push('/m/notice?actived=notice')">
        <div class="item-left">
          <img src="/img/mobile/user-list-5.png" alt="" />
        </div>
        <div class="item-right">
          <div class="right-box-left">通知中心</div>
          <div class="right-box-right">
            <img src="/img/mobile/right-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div class="list-item" @click="$router.push('/m/teacher-settled')" v-if="kl_md.KLJSRZ == 1">
        <div class="item-left">
          <img src="/img/mobile/user-list-7.png" alt="" />
        </div>
        <div class="item-right">
          <div class="right-box-left">教师入驻</div>
          <div class="right-box-right">
            <img src="/img/mobile/right-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div
        class="list-item"
        @click="$router.push('/m/member')"
        v-if="
          !is_hidden_content &&
            kl_md.KLDLTK != 1 &&
            kl_md.KLHY == 1 &&
            isOpenMember === 1
        "
      >
        <div class="item-left">
          <img src="/img/mobile/user-list-6.png" alt="" />
        </div>
        <div class="item-right">
          <div class="right-box-left">会员中心</div>
          <div class="right-box-right">
            <img src="/img/mobile/right-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div
        class="list-item"
        @click="$router.push('/m/authentication')"
        v-if="!is_hidden_content && kl_md.KLDLTK != 1 && kl_md.KLSMRZ == 1"
      >
        <div class="item-left">
          <img src="/img/mobile/authentication.png" alt="" />
        </div>
        <div class="item-right">
          <div class="right-box-left">认证中心</div>
          <div class="right-box-right">
            <img src="/img/mobile/right-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div
        class="list-item"
        @click="$router.push('/m/coupon')"
        v-if="!is_hidden_content && kl_md.KLDLTK != 1 && kl_md.KLYHJ == 1"
      >
        <div class="item-left">
          <img src="/img/mobile/coupon.png" alt="" />
        </div>
        <div class="item-right">
          <div class="right-box-left">优惠卷</div>
          <div class="right-box-right">
            <img src="/img/mobile/right-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div
        class="list-item"
        @click="$router.push('/m/class-info')"
      >
        <div class="item-left">
          <img src="/img/mobile/user-list-8.png" alt="" />
        </div>
        <div class="item-right">
          <div class="right-box-left">班级信息</div>
          <div class="right-box-right">
            <img src="/img/mobile/right-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div
        class="list-item"
        @click="$router.push('/m/app-download')"
        v-if="web_info.ANDROID_APP_URL && kl_md.KLAPP == 1"
      >
        <div class="item-left">
          <img src="/img/mobile/user-list-12.png" alt="" />
        </div>
        <div class="item-right">
          <div class="right-box-left">APP下载</div>
          <div class="right-box-right">
            <img src="/img/mobile/right-icon.png" alt="" />
          </div>
        </div>
      </div>
    </div> -->
    <div>&nbsp;</div>
  </div>
</template>

<script>
import { userLogout } from "~/api/account/user.js";
import { getMemberConfig } from "~/api/member";
import { getStudyLevel, getStudyLevelConfig } from "~/api/study-level";
import { getAreaAgentInfo, getSupMemberMime } from "~/api/distribution";
import { mapState, mapMutations, mapActions } from "vuex";
import CompareFun from "~/utils/CompareFun";
export default {
  components: {},
  scrollToTop: true,
  props: ["setDisabled", "refreshFun", "setLoading"],
  data() {
    return {
      that: this,
      is_pick_locale: false,
      isOpenMember: 0,
      isAreaAgent: false, //是否为区域代理人
      studyLevelList: [], //学习等级列表
      studyLevelConfig: {}, //学习等级配置
      isTeamAgent: false //是否加入团队
    };
  },
  activated() {
    if (document.body.scrollTop!=0) {
        document.body.scrollTop = 0;
    }else {
        document.documentElement.scrollTop = 0;
    }
    this.setDisabled(false);
    this.getAreaAgentInfo();
    this.getStudyLevelList();
    this.getStudyLevelConfig();
    this.getSupMemberMime();
    this.initUser();
    this.initMember();
    this.refreshFun(() => {
      this.initUser();
      this.initMember();
      this.setLoading(false);
    });
  },
  deactivated() {
    this.setDisabled(true);
  },
  computed: {
    ...mapState({
      web_info(state) {
        return state.web_info;
      },
      user_info(state) {
        return state.user_info;
      },
      token(state) {
        return state.token;
      },
      login_type(state) {
        return state.login_type;
      },
      major_list(state) {
        return state.major_list;
      },
      class_list(state) {
        return state.class_list;
      },
      buy_record_list(state) {
        return state.buy_record_list;
      },
      locales(state) {
        return state.locales;
      },
      locale(state) {
        return state.locale;
      },
      is_client_locale(state) {
        return state.is_client_locale;
      },
      is_member(state) {
        return JSON.stringify(state.member_info) != "{}";
      },
      user_member(state) {
        return state.member_info;
      },
      kl_md(state) {
        return state.kl_md;
      },
      is_hidden_content(state) {
        return state.is_hidden_content;
      },
      is_wechat_ios_limit(state) {
        return state.is_wechat_ios_limit;
      },
      is_hidden_for_ios(state) {
        return state.is_hidden_for_ios;
      }
    }),
    current_locale() {
      let index = 0;
      this.locales.forEach((i, x) => {
        if (i.code == this.locale) {
          index = x;
        }
      });
      return index;
    }
  },
  filters: {
    formatStudyStar(val, that) {
      if (that.studyLevelList.length > 0) {
        if (val >= 0 && val < 5) {
          return that.studyLevelList[0]["designation"];
        } else if (val >= 5 && val < 10) {
          return that.studyLevelList[1]["designation"];
        } else if (val >= 10 && val < 15) {
          return that.studyLevelList[2]["designation"];
        } else if (val >= 15 && val < 20) {
          return that.studyLevelList[3]["designation"];
        } else if (val >= 20) {
          return that.studyLevelList[4]["designation"];
        } else {
          return "未知";
        }
      } else {
        return "未知";
      }
    }
  },
  watch: {},
  methods: {
    ...mapActions(["initMajorList", "initUser", "initMember"]),
    async getStudyLevelList() {
      if (this.token && Object.keys(this.user_info).length > 0) {
        let result = await getStudyLevel();
        if (result && result.data && result.data.code === 200) {
          this.studyLevelList = result.data.data.rows;
        }
      } else {
        return false;
      }
    },
    async getStudyLevelConfig() {
      if (this.token && Object.keys(this.user_info).length > 0) {
        let result = await getStudyLevelConfig(1);
        if (result && result.data && result.data.code === 200) {
          this.studyLevelConfig = result.data.data;
        }
      } else {
        return false;
      }
    },
    getClassName(id) {
      let res = this.class_list.filter(i => i.id == id);
      if (res.length > 0) {
        return res[0].name;
      } else {
        return this.$t("locale.mobile.edit.t15");
      }
    },
    onConfirm(value, index) {
      this.$store.commit("SET_LANG", value.code);
      this.is_pick_locale = false;
    },
    onChange(picker, value, index) {
      console.log(`当前值：${value}, 当前索引：${index}`);
    },
    onCancel() {
      this.is_pick_locale = false;
    },
    async handleLogout() {
      this.$dialog
        .confirm({
          title: this.$t("locale.mobile.user.t16"),
          message: this.$t("locale.mobile.user.t17")
        })
        .then(async () => {
          let params = {};
          if (this.login_type == "email") {
            params = {
              email: this.user_info.email
            };
          } else if (this.login_type == "mobile") {
            params = {
              account: this.user_info.mobile
            };
          } else {
            params = {
              account: this.user_info.account
            };
          }
          let result = await userLogout(params);
          if (result.data.code === 200) {
            this.$store.commit("SIGN_OUT");
            this.$toast(this.$t("locale.mobile.user.t18"));
          } else {
            this.$toast(this.$t("locale.mobile.user.t19"));
          }
        })
        .catch(() => {});
    },
    getMajorName(id) {
      let res = this.major_list.filter(i => i.id == id);
      if (res.length > 0) {
        return res[0].name;
      } else {
        return this.$t("locale.mobile.user.t20");
      }
    },
    toPath(path) {
      this.$router.push(path);
    },
    async getMemberConfig() {
      let result = await getMemberConfig();
      console.log("会员配置", result);
      if (result && result.data.code === 200) {
        this.isOpenMember = result.data.data.isOpenMember;
      }
    },
    async getAreaAgentInfo() {
      if (this.token && Object.keys(this.user_info).length > 0) {
        let result = await getAreaAgentInfo({ userId: this.user_info.id });
        console.log("是否为区域代理人", result);
        if (result && result.data.code == 200) {
          if (result.data.data.rows.length > 0) {
            this.isAreaAgent = true;
          } else {
            this.isAreaAgent = false;
          }
        } else {
          this.isAreaAgent = false;
        }
      } else {
        this.isAreaAgent = false;
      }
    },
    async getSupMemberMime() {
      if (this.token && Object.keys(this.user_info).length > 0) {
        let result = await getSupMemberMime({ userId: this.user_info.id });
        console.log("是否加入团队", result);
        if (result && result.data.code == 200) {
          if (result.data.data.rows.length > 0) {
            this.isTeamAgent = true;
          } else {
            this.isTeamAgent = false;
          }
        } else {
          this.isTeamAgent = false;
        }
      } else {
        this.isTeamAgent = false;
      }
    }
  },
  created() {
    this.setDisabled(false);
    this.getMemberConfig();
    this.initMajorList();
    this.initMember();
    this.getAreaAgentInfo();
    this.getStudyLevelList();
    this.getStudyLevelConfig();
    this.getSupMemberMime();
    this.refreshFun(() => {
      this.initUser();
      this.initMember();
      this.setLoading(false);
    });
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.page-mobile-user {
  background-color: #eef0f4;
  min-height: 100vh;
  .user-info {
    width: 100%;
    height: 5.376rem;
    background-color: var(--theme-color);
    .head-top {
      height: 0.8rem;
      z-index: 999999;
      position: fixed;
      top: 0;
      left: 0;
      line-height: 0.8rem;
      display: flex;
      align-items: center;
      box-shadow: none;
      justify-content: space-between;
      color: #ffffff;
      width: 7.2rem;
      background-color: var(--theme-color);
      .top-left {
        width: 16%;
      }
      .top-center {
        width: 88%;
        text-align: center;
        font-size: 0.3456rem;
        color: #ffffff;
        font-weight: bold;
      }
      .top-right {
        width: 16%;
        height: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 0.345rem;
          height: 0.345rem;
          display: block;
        }
      }
    }
    .info {
      box-sizing: border-box;
      padding: 1.2rem 0.4rem 0;
      display: flex;
      .info-logo {
        width: 1.44rem;
        height: 1.44rem;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 0.4rem;
        background: #ffffff;
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .info-content {
        width: 4.5rem;
        .content-top {
          display: flex;
          align-items: center;
          margin-top: 0.2rem;
          .user-name {
            color: #ffffff;
            font-size: 0.34559rem;
            font-weight: bold;
          }
          .user-member {
            margin: 0 0.2rem;
            .member-logo {
              width: 1.4784rem;
              height: 0.3936rem;
              display: block;
            }
            .member-level-one {
              width: 0.3936rem;
              height: 0.2784rem;
              display: block;
            }
            .member-level-two {
              width: 0.336rem;
              height: 0.2784rem;
              display: block;
            }
            .member-level-three {
              width: 0.3648rem;
              height: 0.2784rem;
              display: block;
            }
          }
          .user-signin {
            .signin-logo {
              width: 1.0656rem;
              height: 0.3936rem;
              display: block;
            }
          }
        }
        .content-bottom {
          margin-top: 0.2rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .bottom-left {
            // width: 1.92rem;
            // padding: 0 0.2rem;
            height: 0.4032rem;
            // background-color: #80aeff;
            // border-radius: 0.2rem;
            line-height: 0.4032rem;
            // text-align: center;
            color: #ffffff;
          }
          .bottom-right {
            color: #ffffff;
            display: flex;
            align-items: center;
            img {
              display: block;
              width: 0.144rem;
              height: 0.17279rem;
            }
          }
        }
      }
    }
    .not-login {
      box-sizing: border-box;
      padding: 1.2rem 0.4rem 0;
      .default-logo {
        width: 1.44rem;
        height: 1.44rem;
        overflow: hidden;
        border-radius: 50%;
        margin: 0 auto;
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .user-tx {
        margin-top: 0.3rem;
        text-align: center;
        color: #ffffff;
        font-size: 0.3rem;
        > a {
          color: #fff;
          text-decoration: underline;
        }
      }
    }
    .study-info {
      margin-top: 0.7rem;
      box-sizing: border-box;
      padding: 0rem 0.4rem 0;
      display: flex;
      color: #ffffff;
      text-align: center;
      font-size: 0.3rem;
      line-height: 0.36rem;
      position: relative;
      .study-left {
        width: 50%;
      }
      .study-right {
        width: 50%;
        display: flex;
        flex-wrap: wrap;
        .study-star {
          padding: 0 0.2rem;
          margin: 0 auto;
          border-radius: 0.2rem;
          background-color: #ffffff;
          color: var(--theme-color);
        }
      }
      &::after {
        content: "";
        display: block;
        width: 0.02rem;
        height: 0.3rem;
        position: absolute;
        left: 50%;
        bottom: 0.03rem;
        transform: translateX(-50%);
        background-color: #ffffff;
      }
    }
  }
  .user-nav {
    width: 6.624rem;
    height: 1.728rem;
    background: #ffffff;
    border-radius: 0.2rem;
    margin: -0.864rem auto 0;
    display: flex;
    justify-content: space-around;
    .nav-item {
      width: 33.33333%;
      height: 1.728rem;
      padding: 0.34rem 0;
      .nav-icon {
        width: 0.5376rem;
        height: 0.5376rem;
        background: var(--theme-color);
        margin: 0 auto 0.16rem;
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .nav-name {
        text-align: center;
        font-size: 0.3rem;
      }
    }
  }
  .nav-box-list {
    width: 6.624rem;
    padding: 0.2rem 0;
    background: #ffffff;
    border-radius: 0.2rem;
    margin: 0.384rem auto;
    .list-item {
      width: 100%;
      height: 1.0368rem;
      display: flex;
      .item-left {
        width: 16%;
        height: 1.0368rem;
        display: flex;
        align-items: center;
        i {
          margin: 0 auto;
          display: block;
          color: #7d8189;
          font-size: 0.34rem;
          font-weight: bold;
        }
        img {
          width: 0.34559rem;
          height: 0.3072rem;
          margin: 0 auto;
          display: block;
        }
      }
      .item-right {
        width: 84%;
        height: 1.0368rem;
        font-size: 0.3rem;
        line-height: 1.0368rem;
        border-bottom: 0.01rem solid #e8e9eb;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .right-box-left {
        }
        .right-box-right {
          margin-right: 0.2rem;
          img {
            width: 0.2304rem;
            height: 0.2304rem;
            display: block;
          }
        }
      }
    }
    .list-item:last-child {
      .item-right {
        border: none;
      }
    }
  }
  .locale-action-box {
    z-index: 999999 !important;
    width: 7.2rem;
    left: 0;
  }
}
</style>
<style lang="scss">
.page-mobile-user {
}
</style>
